<script setup>
import { nextTick, reactive, ref } from "vue";
import SearchTable from "@/components/SearchTable.vue";
import constants from "@/utils/constants";
import summaryHistoryApi from "@/api/summaryHistoryApi";
import { Message } from "@arco-design/web-vue";

const searchForm = ref();
const searchListTable = ref();
const searchModel = ref({
    schoolId: "",
    studyCode: "",
    name: ""
});

const scroll = ref({
    x: 1500,
    y: 800
})

const columns = [
    {
        title: "学校名称",
        dataIndex: "schoolName",
        width: 150,
    },
    {
        title: "学年",
        dataIndex: "schoolYear",
        width: 100,
        fixed: "left",
    },
    {
        title: "学生姓名",
        dataIndex: "name",
        width: 100,
    },
    {
        title: "性别",
        slotName: "sex",
        width: 100,
    },
    {
        title: "出生日期",
        dataIndex: "birthday",
        width: 120,
    },
    {
        title: "民族",
        slotName: "nation",
        width: 100,
    },
    {
        title: "学籍号",
        dataIndex: "studyCode",
        width: 200,
    },
    {
        title: "身份证号",
        dataIndex: "idNumber",
        width: 200,
    },
    {
        title: "历年成绩",
        slotName: "totalList",
        width: 250,
    },
    {
        title: "毕业分数",
        dataIndex: "score",
        fixed: "right",
        width: 100,
    },
    // {
    //     title: "操作",
    //     slotName: "action",
    //     fixed: "right",
    //     width: 100,
    // },
];

const getNationName = (value) => {
    let nationItem = constants.nationList.find((res) => {
        return res.value == value;
    });
    return !nationItem ? value : nationItem.label;
};

const search = () => {
    // if (!searchModel.value.studyCode || !searchModel.value.name) {
    //     Message.warning("请先输入查询条件");
    //     return;
    // }
    searchListTable.value.load();
};

const visible = ref(false);
const calculating = ref(false);
const schoolYear = ref("");
const showCalculate = () => {
    visible.value = true
    schoolYear.value = "";
}

const calculate = () => {
    if (!schoolYear.value) {
        return;
    }
    calculating.value = true;
    summaryHistoryApi.calculate({
        schoolYear: schoolYear.value
    }).then(res => {
        calculating.value = false;
    })
}

</script>
<template>
    <div class="main-con">
        <a-card style="margin-bottom: 10px;">
            <a-form ref="searchForm" :model="searchModel" layout="inline">
                <a-form-item field="studyCode" label="学籍号">
                    <a-input v-model="searchModel.studyCode" placeholder="请输入学籍号"></a-input>
                </a-form-item>
                <a-form-item field="name" label="学生姓名">
                    <a-input v-model="searchModel.name" placeholder="请输入学生姓名"></a-input>
                </a-form-item>
                <a-form-item field="flag" label="数据状态">
                    <a-select v-model="searchModel.flag" placeholder="请选择" allow-clear style="width: 200px;">
                        <a-option value="0">正常</a-option>
                        <a-option value="1">数据缺失</a-option>
                        <a-option value="2">多数据</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" @click="search">查询</a-button>
                        <a-button @click="searchForm.resetFields()">重置</a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </a-card>
        <search-table ref="searchListTable" :params="searchModel" :scroll="scroll"
            url="/admin/v1/summary/history/graduation" :auto-load="false" :columns="columns">
            <template #nation="{ record }">
                {{ getNationName(record.nation) }}
            </template>
            <template #sex="{ record }">
                {{ record.sex == "1" ? "男" : " 女" }}
            </template>
            <template #totalList="{ record }">
                <a-space direction="vertical" fill>
                    <a-tag color="blue" v-for="item in record.totalList">
                        {{ item.schoolYear + '年 | 分数：' + item.score }}
                    </a-tag>
                </a-space>
            </template>
        </search-table>
    </div>

    <a-modal v-model:visible="visible" @ok="calculate" width="400px" :ok-text="calculating ? '正在计算' : '开始计算'">
        <template #title>
            计算毕业成绩
        </template>
        <div>
            <a-year-picker v-model="schoolYear" style="width: 300px;" />
        </div>
    </a-modal>
</template>
<style></style>